<template>
  <div class="tool-detail">
    <!-- 返回按钮 -->
    <div class="back-button" @click="$router.go(-1)">
      <i class="fas fa-arrow-left"></i> 返回
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-state">
      <div class="spinner"></div>
      <p>加载中...</p>
    </div>

    <!-- 错误提示 -->
    <div v-else-if="error" class="error-message">
      <i class="fas fa-exclamation-circle"></i>
      {{ error }}
    </div>

    <!-- 产品详情 -->
    <div v-else class="detail-container">
      <!-- 左侧产品展示 -->
      <div class="product-showcase">
        <div class="main-image">
          <img :src="currentProduct.images[activeImageIndex]" alt="产品主图">
        </div>
        <div class="thumbnail-list">
          <img 
            v-for="(image, index) in currentProduct.images" 
            :key="index"
            :src="image"
            :class="{ active: index === activeImageIndex }"
            @click="activeImageIndex = index"
            alt="产品缩略图"
          >
        </div>
        
        <div class="product-features">
          <div 
            v-for="(feature, index) in features" 
            :key="index" 
            class="feature-item"
          >
            <span>{{ feature.title }}</span>
            <span class="sub-text">{{ feature.description }}</span>
          </div>
        </div>
      </div>

      <!-- 右侧产品信息 -->
      <div class="product-info">
        <h1>{{ currentProduct.title }}</h1>
        <div class="sales-info">
          已售：{{ currentProduct.sales }}
        </div>

        <!-- 分类标签 -->
        <div class="category-section">
          <h3>分类：</h3>
          <div class="category-tags">
            <span 
              v-for="category in categories" 
              :key="category.id"
              :class="['tag', { active: selectedCategory === category.id }]"
              @click="selectCategory(category.id)"
            >
              {{ category.name }}
            </span>
          </div>
        </div>

        <!-- 时长选择 -->
        <div class="duration-section">
          <h3>时长：</h3>
          <div class="duration-options">
            <div 
              v-for="option in durationOptions" 
              :key="option.id"
              :class="['duration-card', { active: selectedDuration === option.id }]"
              @click="selectDuration(option.id)"
            >
              <div class="duration-title">{{ option.duration }}</div>
              <div class="price">¥ {{ option.price }}</div>
              <div class="features">
                <div v-for="(feature, index) in option.features" :key="index">
                  <i class="fas fa-check"></i> {{ feature }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 免责说明 -->
        <div class="disclaimer">
          <p>注意：商品为计算机软件等数字化商品，虚拟产品有唯一性和不可回收性，拍后不可退款，不同意勿拍。</p>
        </div>

        <!-- 支付按钮 -->
        <div class="payment-section">
          <div class="total-price">¥{{ currentPrice }}</div>
          <div class="payment-buttons">
            <button class="pay-button wechat" v-auth-click="handleWechatPay">
              <img src="@/assets/detail/wechat-logo.png" alt="微信">
              微信支付
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { WechatPay } from '@/api/detail'

export default {
  name: 'ToolDetailView',
  data() {
    return {
      activeImageIndex: 0,
      selectedDuration: 1,
      selectedCategory: 1,
      currentProduct: {
        id: 1,
        title: 'GPT Plus',
        sales: 205781,
        mainImage: require('@/assets/detail/chatgpt-plus-img1.png'),
        images: [
          require('@/assets/detail/chatgpt-plus-img1.png'),
          require('@/assets/detail/chatgpt-plus-img2.png')
        ]
      },
      categories: [
        {
          id: 1,
          name: '国内稳定直连'
        },
        {
          id: 2, 
          name: '共享会员'
        }
      ],
      durationOptions: [
        {
          id: 1,
          duration: '1个月',
          price: 29,
          title: 'GPT Plus基础月付',
          features: [
            '使用额度次数：GPT4:4k/8小时',
            '响应支持：4/4o/4o-min/4o-min',
            '不限制IP和次数，不支持1to1-min'
          ]
        },
        {
          id: 2,
          duration: '3个月',
          price: 45,
          title: 'GPT Plus标准月付',
          features: [
            'GPT4:4k/8小时',
            '24/7全时段100次',
            '支持1to1-min'
          ]
        },
        {
          id: 3,
          duration: '1年',
          price: 99,
          title: 'GPT Plus专业月付',
          features: [
            'GPT4:4k/24小时250次',
            '24/7全时段500次',
            '专属客服支持'
          ]
        }
      ],
      features: [
        {
          title: '国内直连',
          description: '无需魔法'
        },
        {
          title: '都支持',
          description: 'GPT模型'
        },
        {
          title: '支持',
          description: '插件支持'
        },
        {
          title: '支持',
          description: 'GPTS'
        }
      ],
      loading: true,
      error: null
    }
  },
  computed: {
    currentPrice() {
      const option = this.durationOptions.find(opt => opt.id === this.selectedDuration)
      return option ? option.price : 0
    }
  },
  methods: {
    selectDuration(id) {
      this.selectedDuration = id
    },
    async selectCategory(id) {
      this.selectedCategory = id
      await this.fetchProductDetails(id)
    },
    async fetchProductDetails(categoryId) {
      // 获取产品详情，先写死，后端完成再开发
      this.loading = false
      console.log('categoryId', categoryId);

      // try {
      //   this.loading = true
      //   const productId = this.$route.params.id
      //   const response = await getProductDetail(productId, categoryId)
        
      //   // 更新产品数据
      //   this.currentProduct = {
      //     id: response.id,
      //     title: response.title,
      //     sales: response.sales,
      //     mainImage: response.mainImage,
      //     images: response.images
      //   }
        
      //   // 更新价格选项
      //   this.durationOptions = response.durationOptions
        
      //   // 更新特性
      //   this.features = response.features
        
      //   // 默认选择第一个时长选项
      //   if (this.durationOptions.length > 0) {
      //     this.selectedDuration = this.durationOptions[0].id
      //   }
      // } catch (err) {
      //   this.error = '获取产品信息失败，请稍后重试'
      //   console.error('Error fetching product details:', err)
      // } finally {
      //   this.loading = false
      // }
    },
    async handleWechatPay() {
      try {
        const response = await WechatPay( {
          categoryId: this.selectedCategory,
          durationId: this.selectedDuration,
          productId: this.currentProduct.id
        })
        // 处理支付响应
        console.log('支付响应:', response.data)
        // TODO: 根据后端返回处理支付二维码等
      } catch (error) {
        console.error('支付请求失败:', error)
        this.error = '支付请求失败,请稍后重试'
      }
    }
  },
  // 组件创建时获取数据
  created() {
    this.fetchProductDetails(this.selectedCategory)
  },
  // 监听路由参数变化，以便用户直接通过URL切换产品时更新数据
  watch: {
    '$route.params.id': {
      handler() {
        this.fetchProductDetails(this.selectedCategory)
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
.tool-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  cursor: pointer;
  margin-bottom: 20px;
}

.detail-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.product-showcase {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.main-image {
  width: 100%;
  margin-bottom: 20px;
}

.main-image img {
  width: 100%;
  border-radius: 8px;
}

.thumbnail-list {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.thumbnail-list img {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s;
  object-fit: contain;
}

.thumbnail-list img.active {
  opacity: 1;
  border: 2px solid #3F5D62;
}

.product-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.feature-item {
  text-align: center;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 8px;
}

.feature-item .sub-text {
  display: block;
  font-size: 0.8em;
  color: #666;
}

.product-info {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.product-info h1 {
  margin-bottom: 10px;
  color: #333;
}

.sales-info {
  color: #666;
  margin-bottom: 20px;
}

.category-section, .duration-section {
  margin-bottom: 30px;
}

.category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.tag {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #f5f7fa;
  color: #666;
  border: 1px solid #e4e7ed;
  position: relative;
  overflow: hidden;
}

.tag:hover {
  background: #edf2f7;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.tag.active {
  background: #3F5D62;
  color: white;
  border-color: #3F5D62;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(63, 93, 98, 0.25);
  transform: translateY(-2px) scale(1.05);
}

.tag.active::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
}

.tag.active::after {
  content: '✓';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: #e6a23c;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transform: scale(0.8);
}

.duration-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 15px;
}

.duration-card {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.3s;
}

.duration-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.duration-card.active {
  border-color: #3F5D62;
  box-shadow: 0 4px 12px rgba(63, 93, 98, 0.2);
}

.duration-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.price {
  color: #3F5D62;
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 10px;
}

.features {
  font-size: 0.9em;
  color: #666;
}

.features div {
  margin-bottom: 5px;
}

.payment-section {
  margin-top: 30px;
}

.total-price {
  font-size: 2em;
  color: #3F5D62;
  font-weight: bold;
  margin-bottom: 20px;
}

.payment-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.pay-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 1.1em;
  transition: all 0.3s;
}

.pay-button img {
  height: 24px;
}

.wechat {
  background: #2BDC70;
  color: white;
}

.alipay {
  background: #00a0e9;
  color: white;
}

.pay-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
  .detail-container {
    grid-template-columns: 1fr;
  }
  
  .duration-options {
    grid-template-columns: 1fr;
  }
  
  .payment-buttons {
    grid-template-columns: 1fr;
  }
}

.loading-state {
  text-align: center;
  padding: 40px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3F5D62;
  border-radius: 50%;
  margin: 0 auto 20px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-message {
  text-align: center;
  color: #dc3545;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin: 20px 0;
}

.error-message i {
  margin-right: 8px;
}

.disclaimer {
  color: #666;
  font-size: 12px;
  line-height: 1.5;
  margin: 20px 0;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 4px;
}

.disclaimer p {
  margin: 5px 0;
}
</style> 